<!-- <h1>会员详情</h1> -->
<script setup lang='ts'>
import { reactive, toRefs, ref, markRaw,computed,onMounted,watchEffect } from "vue";
import { ElMessageBox } from "element-plus";
import { Delete, CircleCheck, WarningFilled } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import userManagementStore from "../../store/userManagement";
import userManagementHooks from "../../hooks/userManagement";
import { number } from "echarts";

const route = useRoute();//路由
const store = userManagementStore();
const id = ref<number>()

const userData = ref([]);//用户数据
const MembershipCardInformation = ref([]);// 会员卡信息
const addresList = ref([]);// 收货地址

const login = ()=>{
  let userId:number = route.query.id
  console.log("用户id",userId);
  userManagementHooks.getUserCardInfoByUserId(userId)
  userManagementHooks.searchAddressByUserId(userId)

}


watchEffect(() => {
  userData.value = store.getUserDtaById;
  MembershipCardInformation.value = store.getSearchVipCardById;
  addresList.value = store.getSearchVipCardById
  id.value = store.getUserId
});

// 头像
// const state = reactive({
//   url: ,
// });
// const { url } = toRefs(state);

onMounted(() => {
  // 页面加载完成后执行的函数
  // console.log(route.query.id);
  console.log("会员卡表单数据", MembershipCardInformation);
  console.log("用户表单id", id);
  login()
});

const orderHistory = [
  {
    number: "小王",
    time: "2016-05-03",
    chach: "¥1230.00",
    pay: "微信支付",
    from: "商城",
    state: "已完成",
  },
  {
    number: "小王",
    time: "2016-05-03",
    chach: "¥123.00",
    pay: "微信支付",
    from: "商城",
    state: "已完成",
  },
  {
    number: "小王",
    time: "2016-05-03",
    chach: "¥124.00",
    pay: "微信支付",
    from: "商城",
    state: "已完成",
  },
  {
    number: "小王",
    time: "2016-05-03",
    chach: "¥120.00",
    pay: "微信支付",
    from: "商城",
    state: "已完成",
  },
];

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 消费明细弹出框
const dialogTableVisible = ref(false);
const gridData = [
  {
    date: "2016-05-02",
    name: "John Smith",
    address: "No.1518,  Jinshajiang Road, Putuo District",
  },
];
// 停用弹出框
const open = () => {
  ElMessageBox.confirm(`系统提示：确认要停用该会员卡吗？`, "确认提示", {
    type: "warning",
    icon: markRaw(WarningFilled),
    confirmButtonText: "是的",
    cancelButtonText: "取消",
    showCancelButton: true,
    showConfirmButton: true,
  })
    .then(() => {
      // 点击了确认按钮后执行的代码
      console.log("点击了确认按钮！");
    })
    .catch(() => {
      // 点击了取消按钮后执行的代码
      console.log("点击了取消按钮！");
    });
};
</script>
<!-- 模型 -->
<template>
  <div class="">
    <!-- 返回 -->
    <el-row class="mb-4">
      <router-link to="/MembershipList">
      <el-col :span="24">
        <el-button plain class="return"> &lt; 返回</el-button>
      </el-col>
      </router-link>
    </el-row>
    <!-- 个人信息 -->
    <div class="userManage">
      <el-container>
        <el-aside width="20%" class="m0p0">
          <div class="image textAlign">
            <el-avatar shape="circle" :size="120" fit="cover" :src="userData.photo" />
          </div>
          <div class="textAlign">
            <span>{{ userData.phone }}</span>
          </div>
          <div class="textAlign">
            <el-tag class="ml-2" size="large" type="danger">{{ userData.vipLevel.name }}</el-tag>
          </div>
        </el-aside>
        <el-main class="m0p0">
          <el-row>
            <el-col :span="4"><div class="deep">用户ID</div></el-col>
            <el-col :span="8"><div class="next">{{userData.id}}</div></el-col>
            <el-col :span="4"><div class="deep">注册时间</div></el-col>
            <el-col :span="8"><div class="next">{{userData.createTime}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">昵称</div></el-col>
            <el-col :span="8"><div class="next">{{userData.nickname}}</div></el-col>
            <el-col :span="4"><div class="deep">生日</div></el-col>
            <el-col :span="8"><div class="next">{{userData.birthday}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">性别</div></el-col>
            <el-col :span="8"><div class="next">{{userData.gender}}</div></el-col>
            <el-col :span="4"><div class="deep">职业</div></el-col>
            <el-col :span="8"><div class="next">{{userData.occupation}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">手机</div></el-col>
            <el-col :span="8"><div class="next">{{userData.phone}}</div></el-col>
            <el-col :span="4"><div class="deep">健身经验</div></el-col>
            <el-col :span="8"><div class="next">{{userData.experience}}</div></el-col>
          </el-row>
          <el-row>
            <el-col :span="4"><div class="deep">城市</div></el-col>
            <el-col :span="8"><div class="next">{{userData.city}}</div></el-col>
            <el-col :span="4"><div class="deep">健身目的</div></el-col>
            <el-col :span="8"><div class="next">{{userData.target}}</div></el-col>
          </el-row>
        </el-main>
      </el-container>
    </div>

    <!-- 会员卡信息 -->
    <div>
      <div>会员卡信息</div>
      <el-table
        :data="MembershipCardInformation"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="cardName" label="会员卡" />
        <el-table-column prop="amountReceived" label="余额" />
        <el-table-column prop="cardStatus" label="状态" >
          <template #default="{ row }">
            <el-tag class="ml-2" :type="row.cardStatus == 0 ? '' : 'danger'">{{
              row.cardStatus == 0 ? "正常" : "禁用"
            }}</el-tag>
          </template>
        </el-table-column>
       
      </el-table>
    </div>

    <!-- 收货地址 -->
    <div>
      <div>收货地址</div>
      <el-table
        :data="addresList"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="address" label="详细地址" />
        <el-table-column prop="code" label="邮政编码" />
        <el-table-column prop="defaultUse" label="默认地址" />
      </el-table>
    </div>

    <!-- 订单记录 -->
    <div>
      <div>订单记录</div>
      <el-table
        :data="orderHistory"
        style="width: 100%"
        table-layout="fixed"
        border
      >
        <el-table-column prop="number" label="订单编号" />
        <el-table-column prop="time" label="提交时间" />
        <el-table-column prop="chach" label="订单金额" />
        <el-table-column prop="pay" label="支付方式" />
        <el-table-column prop="from" label="订单来源" />
        <el-table-column prop="state" label="订单状态" />
        <!-- <el-table-column label="操作">
          <el-button text type="primary">查看订单</el-button>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 分页 -->
    <!-- <el-col :span="4">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col> -->

    <!-- 明细弹出框 -->
    <el-dialog v-model="dialogTableVisible" title="消费明细">
      <div>
        <el-row>
          <el-col :span="8"><div class="deep">会员卡：</div></el-col>
          <el-col :span="16"><div class="next">{{}}</div></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><div class="deep">剩余：</div></el-col>
          <el-col :span="16"><div class="next">{{}}</div></el-col>
        </el-row>
      </div>
      <el-table :data="gridData">
        <el-table-column property="date" label="Date" width="150" />
        <el-table-column property="name" label="Name" width="200" />
        <el-table-column property="address" label="Address" />
      </el-table>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogTableVisible = false">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.return {
  float: right;
}
.userManage {
  height: 300px;
  //   border: 1px solid red;
  margin-top: 10px;
  .image {
    // border: 1px solid red;
  }
}
.textAlign {
  text-align: center;
}
.deep {
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
  background-color: #f9fafd;
  border: 0.5px solid rgba(0, 0, 0, 0.2);
}
.next {
  border: 0.5px solid rgba(0, 0, 0, 0.2);
  height: 45px;
  line-height: 45px;
  padding-left: 20px;
}
.m0p0 {
  margin: 0;
  padding: 0;
}
</style>